<template>
    <div class="pull-right" style="height: 60px;">

      <div class="pull-left"><Icon type="ios-home" class="set-width" @click.native="$router.push({path: '/'})"></Icon></div>

      <div class="pull-left" v-if="!isIE">
        <Icon type="android-contract" @click.native="setWidth" class="set-width" v-if="widthBool"></Icon>
        <Icon type="android-expand" @click.native="setWidth" class="set-width" v-if="!widthBool"></Icon>
      </div>
      <div class="pull-left" style="margin-left: 20px;">
        <Dropdown placement="bottom-end">
          <div style="height: 50px;">
            <img src="../../static/img/stu_avatar_m1.png" class="headerpic pull-left" />
            <a href="javascript:void(0)" style="color: #fff;" class="pull-left">
              {{user.username}}
              <Icon type="arrow-down-b"></Icon>
            </a>
            <div class="clearfix"></div>
          </div>
          <DropdownMenu slot="list">
            <DropdownItem>基本资料</DropdownItem>
            <DropdownItem>修改头像</DropdownItem>
            <DropdownItem>修改密码</DropdownItem>
            <DropdownItem divided @click.native="handleLogout"><Icon type="log-out"></Icon> 安全登出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="pull-left">

      </div>
    </div>
</template>
<script>
  export default{
    computed: {
      isIE() {
        return !!window.ActiveXObject || "ActiveXObject" in window
      },
      user() {
        return this.$store.getters.getUser
      }
    },
    props: {
      widthBool: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      setWidth() {
        this.$emit('on-click')
      },
      handleLogout() {
        this.$store.commit('setUser', {})
        window.localStorage.removeItem('user')
        this.$Message.success('您已安全退出')
        this.$router.push({path: '/login'})
      }
    }
  }
</script>
<style scoped>
  .set-width{
    font-size: 24px;
    color: #fff;
    display: inline-block;
    line-height: 60px;
    cursor: pointer;
    margin-left: 25px;
  }
  .headerpic{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;

    margin-top: 8px;
  }
</style>
